import 'package:flutter/material.dart';

class ListCase extends StatelessWidget {
  ListCase({super.key});

  // final 性能优化，运行时常量，一旦赋值，就不能改变
  final List<int> nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

  @override
  Widget build(BuildContext context) {
    // ListView.separated 三个必传参数
    //    itemCount: 列表项数量
    //    itemBuilder: 列表项构建器
    //    separatorBuilder: 分割符构建器
    return ListView.separated(
      // 列表项数量
      itemCount: nums.length,
      // 构建列表项
      itemBuilder: (context, index) {
        return Container(
          height: 100,
          color: Colors.green,
          child: Text(nums[index].toString()),
        );
      },
      // 构建分割符
      separatorBuilder: (context, index) {
        return const Padding(
          padding: EdgeInsets.symmetric(vertical: 8),
          child: Divider(
            height: 1,
            color: Colors.red,
            thickness: 1,
            indent: 10,
            endIndent: 0,
          ),
        );
      },
    );

    // ListView.builder 参数
    //    itemBuilder: 列表项构建器
    //    itemCount: 列表项数量
    // return ListView.builder(
    //   itemBuilder: (context, index) {
    //     return Container(
    //       height: 100,
    //       color: Colors.green,
    //       margin: const EdgeInsets.all(5),
    //       child: Text(nums[index].toString()),
    //     );
    //   },
    //   itemCount: nums.length,
    // );

    // ListView 循环生成列表，默认构造函数
    // return ListView(
    //   children: nums
    //       .map((item) => Container(
    //             height: 100,
    //             color: Colors.amber,
    //             margin: const EdgeInsets.all(5),
    //             child: Text(item.toString()),
    //           ))
    //       .toList(),
    // );

    // 基础用法
    // return ListView(
    //   children: [
    //     Container(
    //       height: 100,
    //       color: Colors.red,
    //     ),
    //     Container(
    //       height: 100,
    //       color: Colors.orange,
    //     ),
    //     Container(
    //       height: 100,
    //       color: Colors.yellow,
    //     ),
    //     Container(
    //       height: 100,
    //       color: Colors.green,
    //     ),
    //     Container(
    //       height: 100,
    //       color: Colors.blue,
    //     ),
    //     Container(
    //       height: 100,
    //       color: Colors.purple,
    //     ),
    //     Container(
    //       height: 100,
    //       color: Colors.pink,
    //     ),
    //     Container(
    //       height: 100,
    //       color: Colors.brown,
    //     ),
    //   ],
    // );
  }
}
